<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>户口办理进度查询页面</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="/szgawx/static/weixin/css/example.css"/>
    <link rel="stylesheet" type="text/css" href="/szgawx/static/weixin/css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="/szgawx/static/plugins/css/home.css"/>
    <link rel="stylesheet" type="text/css" href="/szgawx/static/plugins/css/step-dc-style2.css"/>
    <link rel="stylesheet" type="text/css" href="/szgawx/static/plugins/css/common.css"/>
    <script type="text/javascript" src="/szgawx/static/plugins/js/jquery.min.js"></script>
    <script type="text/javascript" src="/szgawx/static/plugins/js/step-jquery-dc.js"></script>
    <script type="text/javascript" src="/szgawx/static/plugins/js/common.js"></script>
    <script src="/szgawx/static/plugins/js/FormValid.js"></script>
    <style type="text/css">
        html, body {
            overflow-x: hidden;
        }

        .weui_label {
            width: 7em;
        }
    </style>
    <script type="text/javascript">
        var _preFix = getServerPreFix();
        var theRequest = GetRequest();
        $(function () {
            $("#btn_query").click(function () {
                var username = $("#username").val().trim();
                var idcard = $("#idcard").val().trim();
                if (username == null || username == "") {
                    toast("请输入姓名");
                    return;
                }
                if (idcard == null || idcard == "") {
                    toast("请输入身份证号码");
                    return;
                }
                if (validator(E("form"))) {
                    $.ajax({
                        url: _preFix + "/szgawx/api/query/progress/residence?source="+theRequest['source']+"&openId="+theRequest['openId'],
                        type: "post",
                        dataType: "json",
                        timeout: 6000,
                        data: {"username": username, "idcard": idcard},
                        beforeSend: function () {
                            loading("正在查询...");
                        },
                        success: function (data) {
                            if (data && data.succ && data.data && data.data[0]) {
                                var status = data.data[0].STATUS;
                                $("#sqrxm").val(data.data[0].SQRXM);
                                $("#sqrgmsfhm").val(data.data[0].SQRGMSFHM);
                                $("#datatype").val(data.data[0].DATATYPE);
                                $("#status").val(status);
                                $("#slsj").val(data.data[0].SLSJ);
                                setStepNum(status);
                                $("#result").show();
                                finish();
                            } else {
                                $("#result").hide();
                                finish(data.msg);
                            }
                        },
                        error: function () {
                            $("#result").hide();
                            finish("查询失败");
                        }
                    });
                }
                ;
            });
        });
    </script>
</head>

<body style="background: #FBF9FE;">
<div class="bd">
    <article class="weui_article">
        <h1>户口办理进度查询页面</h1>
    </article>
</div>
<form id="form">
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cell_hd">
                <label class="weui_label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text"  placeholder="请输入姓名" id="username">
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd">
                <label class="weui_label">身份证号码</label>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text"  id="idcard" valid='isIdCard'
                       errmsg='请输入正确的身份证号'  placeholder="请输入身份证号">
            </div>
        </div>
    </div>
</form>

<div class="bd spacing" style="margin-top: 15px;">
    <a id="btn_query" class="weui_btn weui_btn_primary">查询</a>

</div>

<div id="result" style="display: none;">
    <div class="weui_cells_title" style="margin-top: 10px;">查询结果</div>
    <div class="weui_cells weui_cells_form">
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" id="sqrxm">
            </div>
        </div>

        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">身份证号码</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" id="sqrgmsfhm">
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">在办业务名称</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" id="datatype">
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">状态</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" id="status">
            </div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><label class="weui_label">时间</label></div>
            <div class="weui_cell_bd weui_cell_primary">
                <input class="weui_input" type="text" id="slsj">
            </div>
        </div>
    </div>
    <div class="weui_cells_title" style="margin-top: 10px;margin-bottom: 10px;">办件流程状态</div>
    <div class="weui_cells weui_cells_form">
        <div class="step_context test"></div>
    </div>
</div>
<script type="text/javascript">
    //所有步骤的数据
    var stepListJson_1 = [{StepNum: 1, StepText: "办理中"},
        {StepNum: 2, StepText: "分局审批<br/>通过"},
        {StepNum: 3, StepText: "已签发"},
        {StepNum: 4, StepText: "已使用"},
        {StepNum: 5, StepText: "已完成"}];
    var stepListJson_2 = [{StepNum: 1, StepText: "办理中"},
        {StepNum: 2, StepText: "分局审批<br/>未通过"}];
    var stepListJson;

    function setStepNum(text) {
        if("分局审批未通过"==text){
            stepListJson = stepListJson_2;
        }else{
            stepListJson = stepListJson_1;
        }
        var r = 0;
        switch (text) {
            case "办理中":
                r = 1;
                break;
            case "分局审批通过":
                r = 2;
                break;
            case "分局审批未通过":
                r = 2;
                break;
            case "已签发":
                r = 3;
                break;
            case "已使用":
                r = 4;
                break;
            case "已完成":
                r = 5;
                break;
        }
        if (r > 0) {
            mycalldrawStep(r);
        }
    }

    //new一个工具类
    var StepTool = new Step_Tool_dc("test", "mycall");
    //回调函数
    function mycalldrawStep(result) {
        StepTool.drawStep(result, stepListJson);
    }
</script>
</body>

</html>